<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/public.css">
    <link rel="stylesheet" href="../../css/majorIndex.css">
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
    <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="box">
        <div class="header">
          <span>师资概况</span>
          <span>图标</span>
        </div>
        <div class="content">
            <div class="echartsBox">
                <div class="title">转业分类</div>
                <div id="echarts1" style="width: 100%;height:300px;"></div>
            </div>
            <div class="echartsBox">
                <div class="title">建设基础</div>
                <div id="echarts2" style="width: 100%;height:300px;"></div>
            </div>
            <div class="echartsBox">
              <div class="title">建设目标</div>
              <div id="echarts3" style="width: 100%;height:300px;"></div>
          </div>
        </div>
    </div>
    <div class="box">
      <div class="header">
        <span>高层次人才</span>
      </div>
      <div class="content">
          <div class="echartsBox">
              <div id="echarts4" style="width: 100%;height:360px;"></div>
          </div>
      </div>
  </div>
</div>
</body>
</html>
<script src="../../layui/layui.all.js"></script>
<script>
  //JavaScript代码区域
  layui.use('element', function () {
    var element = layui.element;
  });
  var myChart1 =  echarts.init(document.getElementById('echarts1'));
  var option1 = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [{
            type: 'pie',
            radius: 80,
            center: ['50%', '50%'],
            data: [
                {
                  value: 158,
                  name: '人文社科类',
                  itemStyle: {
                    color: '#2593FC'
                  }
                },
                {
                  value: 100,
                  name: '理工农医类',
                  itemStyle: {
                    color: '#27C2C1'
                  }
                },
                {
                  value: 200,
                  name: '其他类',
                  itemStyle: {
                    color: '#38C060'
                  }
                }
            ]
        }]
      };
  myChart1.setOption(option1);


  var myChart2 =  echarts.init(document.getElementById('echarts2'));
  var option2 = {
      color: ['#2593FC'],
      tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis: [
          {
              type: 'category',
              data: ['国家级特色专业', '国家级重点专业', '省级特色专业', '省级重点专业', '学院级特色专业', '学院级重点专业'],
              axisLabel: {
                  rotate: 60
              }
          }
      ],
      yAxis: [
          {
              type: 'value'
          }
      ],
      series: [
          {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              data: [100, 52, 200, 334, 390, 330]
          }
      ]
  };
  myChart2.setOption(option2);

  var myChart3 =  echarts.init(document.getElementById('echarts3'));
  var option3 = {
    series: [
      {
        type: 'pie',
        radius: '65%',
        center: ['50%', '50%'],
        selectedMode: 'single',
        data: [
          {
            value: 158,
            name: '骨干专业',
            itemStyle: {
              color: '#2593FC'
            }
          },
          {
            value: 80,
            name: '国家级特色专业',
            itemStyle: {
              color: '#27C2C1'
            }
          },
          {
            value: 70,
            name: '国家级重点专业',
            itemStyle: {
              color: '#38C060'
            }
          },
          {
            value: 120,
            name: '国家级一流专业',
            itemStyle: {
              color: '#F9CB34'
            }
          },
          {
            value: 20,
            name: '省级一流专业',
            itemStyle: {
              color: '#ED4A66'
            }
          },
          {
            value: 90,
            name: '省级重点专业',
            itemStyle: {
              color: '#844ADD'
            }
          },
          {
            value: 18,
            name: '特色专业',
            itemStyle: {
              color: '#2593FC'
            }
          }
        ]
      }
    ]
  };
  myChart3.setOption(option3);
</script>